<template>
	<div class="wrap flex">
		<div class="left flex-1">
			<el-input v-model="searchText" placeholder="请输入要搜索的内容" @keyup.enter="handleInputSearch">
				<template #append>
					<el-button :icon="Search" @click="handleInputSearch" />
				</template>
			</el-input>

			<div class="tag-wrap">
				<el-tabs v-if="props.showTab" v-model="activeName" class="tag-tabs" @tab-click="handleTabsClick">
					<el-tab-pane label="手动标签" name="手动标签"></el-tab-pane>
				</el-tabs>

				<div class="scroll-section scrollbar-thumb">
					<el-checkbox-group v-if="realTagData.length" v-model="tagIdList" size="small">
						<div v-for="(item, index) in realTagData" :key="index" class="tag-group">
							<div class="tag-title">{{ item.groupName }}</div>
							<el-space wrap>
								<el-checkbox-button
									v-for="(itemVal, indexVal) in item.list"
									:key="`${index}-${indexVal}`"
									:value="itemVal.id"
								>
									{{ itemVal.labelName }}
								</el-checkbox-button>
							</el-space>
						</div>
					</el-checkbox-group>
					<el-empty v-else description="暂无标签" />
				</div>
			</div>
		</div>
		<div v-if="!props.simple" class="right">
			<div class="header">
				<span>已选标签（{{ tagIdList.length }}）</span>
				<el-text class="mx-1 cursor-pointer" type="primary" @click="handleTagClear">清空</el-text>
			</div>
			<div class="scroll-section scrollbar-thumb">
				<el-space v-if="tagIdList.length" wrap>
					<el-tag
						v-for="(item, index) in tagList"
						:key="index"
						closable
						type="primary"
						@close="handleTagClose(item, $event)"
					>
						{{ item.labelName }}
					</el-tag>
				</el-space>
				<el-empty v-else description="暂无已选标签" />
			</div>
		</div>
	</div>
	<slot name="footer" />
</template>

<script setup>
	import { Search } from '@element-plus/icons-vue'
	import tool from '@/utils/tool'
	import tagApi from '@/api/biz/tagApi'

	const props = defineProps({
		simple: {
			type: Boolean,
			default: false
		},
		showTab: {
			type: Boolean,
			default: true
		},
		type: {
			type: [Number, null],
			default: 0 // 0或null-全部 1-线索 2-客户
		}
	})

	onMounted(() => {
		getTagTreeList()
	})

	/**
	 * 搜索
	 */
	const searchText = ref(null)
	const handleInputSearch = () => {
		realTagData.value = searchText.value
			? tagData.value.reduce((total, item) => {
					const children = item.list.filter(
						(item) => !!item.labelName.toLowerCase().includes(searchText.value.toLowerCase())
					)
					if (children.length) {
						total.push({
							...item,
							list: children
						})
					}
					return total
			  }, [])
			: tool.deepClone(tagData.value)
	}

	/**
	 * tabs切换
	 */
	const activeName = ref('手动标签')
	const handleTabsClick = (tab, event) => {
		console.log(tab, event)
	}

	/**
	 * 标签列表
	 */
	const tagIdList = ref([])
	const tagNameList = computed(() => tagList.value.map((item) => item.labelName))
	const tagData = ref([])
	const realTagData = ref([])
	const tagList = computed(() => {
		const totalList = tagData.value.reduce((total, item) => [...total, ...item.list], [])
		return totalList.reduce((total, item) => {
			if (tagIdList.value.includes(item.id)) {
				total.push(item)
			}
			return total
		}, [])
	})
	const getTagTreeList = () => {
		tagApi.tagTreeList({ type: props.type }).then((res) => {
			tagData.value = res
			realTagData.value = tool.deepClone(tagData.value)
		})
	}

	/**
	 * 已选标签
	 */
	const handleTagClose = ({ id }, event) => {
		tagIdList.value = tagIdList.value.filter((item) => item !== id)
	}
	const handleTagClear = () => {
		tagIdList.value = []
	}

	const setTagIdList = (idList = []) => {
		tagIdList.value = idList
	}
	const clear = () => {
		searchText.value = null
		activeName.value = '手动标签'
		tagIdList.value = []
		realTagData.value = tool.deepClone(tagData.value)
	}

	defineExpose({
		tagIdList,
		tagNameList,
		setTagIdList,
		clear
	})
</script>

<style scoped lang="less">
	//@lightColor: var(--el-color-primary-light-9);
	//@lightColor-1: @lightColor;
	//@darkColor: var(--el-color-primary);
	//@darkColor-1: @darkColor;

	@lightColor: #f1f5ff;
	@lightColor-1: #ebf0ff;
	@darkColor: #2f5fff;
	@darkColor-1: #6f90ff;
	.wrap {
		.left {
			.tag-tabs {
				&:deep(.el-tabs__header) {
					margin-bottom: 0;
				}
			}

			.tag-group {
				margin-top: 10px;
				padding-top: 30px;
				.tag-title {
					font-size: 14px;
					position: relative;
					top: -16px;
					color: #505050;
				}
			}
		}
		.right {
			width: 40%;
			margin-left: 30px;
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 32px;
				margin-bottom: 12px;
				border-bottom: 1px solid #ddd;
			}
		}

		.scroll-section {
			min-height: 50vh;
			overflow-y: auto;
		}

		&:deep(.el-checkbox-button:first-child) {
			.el-checkbox-button__inner {
				background: @lightColor;
				border-color: @lightColor-1;
				border-radius: 2px;
				color: @darkColor-1;
				overflow: hidden;
			}
			&.is-checked .el-checkbox-button__inner {
				position: relative;
				border-color: @darkColor;
				&:after {
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					width: 6px;
					height: 6px;
					background: linear-gradient(45deg, transparent, transparent 50%, @darkColor 50%, @darkColor 100%);
				}
			}
		}

		&:deep(.el-tag) {
			background: @lightColor;
			border-color: @lightColor-1;
			border-radius: 2px;
			color: @darkColor-1;
			.el-icon.el-tag__close {
				color: @darkColor;
				&:hover {
					background: @lightColor;
				}
			}
		}
	}
</style>
